<%--
  Created by IntelliJ IDEA.
  User: w1057229265
  Date: 2021/6/22
  Time: 12:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bookStore</title>
    <link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.9.15/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/plugins/jquery-easyui-1.9.15/themes/icon.css">
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.9.15/jquery.min.js"></script>
    <script type="text/javascript" src="../static/plugins/jquery-easyui-1.9.15/jquery.easyui.min.js"></script>
    <style type="text/css">
        .clear{
            clear:both;
        }

        #top_left{
            width:300px;
            float: left;
        }
        #top_right{
            width:400px;
            float: right;
            margin-top:15px;
            font-size: 13px;
        }
        #top_right img{
            margin-bottom: -5px;
        }
        #top_right a{
            text-decoration: none;
            color:#06F;
        }
        #top_right a:hover{
            color:#909;
        }
        #menu{
            background-color: #1C3F09;
            border-top:5px solid #82B211;
            padding: 10px 0px;
            text-align: right;
        }
        #menu a{
            margin: 0 8px;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 15px;
        }
        #menu a:hover{
            color: #999;
        }
        #menu .all{
            color: yellow
        }
        #search{
            background-color: #B6B684;
            padding:7px 0;
            text-align: right;

        }
        #search input[type='image']{
            /* margin-top: 5px; */
            margin-right: 250px;
            margin-bottom: -4px;
        }
        #search input[type='text']{
            height: 16px;
            border:1px solid #999;
        }

        /*-------------------------------------------------------*/

        #content{
            width:900px;
            margin:8px auto 15px;/*auto div居中*/
        }

        #content_top{
            text-align: right;
            font-size:13px;
        }
        #content_bottom{
            border:1px solid #999;
            background-color: #FCFDEF;
            padding:10px 15px;
        }
        #content_bottom h1{
            font-size: 15px;
            display: inline;
        }
        #content_bottom span{
            font-size: 13px;
        }
        #productlist_img img{
            width: 100%;
        }
        .book{
            float: left;
            width: 25%;
            text-align: center;
            padding:10px 0px;
        }
        .bookimg img{
            width: 130px;
            height: 196px;
        }
        #jumpPage{
            text-align: center;
            margin: 10px;
        }
        #jumpPage a{
            padding:2px 6px;
            border: 1px solid #9AAFE5;
            text-decoration: none;
            color:#9AAFE5;
        }
        #jumpPage a:hover{
            color:#2B66A5;
            border: 1px solid #2B66A5;
        }
        .current{
            background-color: blue;
        }

        /*-------------------------------------------------------*/

        #bottom{
            background-color: #EFEEDC;
            height:60px;
            padding:10px 0px;
        }

        #bottom_left{
            width: 400px;
            float: left;
            margin-left: 200px;
        }
        #bottom_right{
            width: 500px;
            float: left;
            line-height:28px;/*行高*/
        }

    </style>
</head>
<body>
<div id="tb" style="height:auto">
    <table>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a id="btnE" href="book11.jsp" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">详情</a></td>
            <td>
                <div class="datagrid-btn-separator"></div>
            </td>
            <td><a id="btnAdd" href="Register.jsp" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">生成订单</a></td>

        </tr>
    </table>
</div>
<div id="page">
    <div id="top">
        <div id="top_left">
            <img alt="" src="images/logo.png">
        </div>
        <div id="top_right">

        </div>
    </div>
    <div class="clear"></div>
    <div id="menu" >
        <img src="..\static\images\u.jpg" width="50px" >
        <a href="#">购物车</a>
    </div>
    <div id="content">
        <div id="content_top">
            <span>首页 > 特价书 > 图书列表 </span>
        </div>
        <div id="content_bottom">
            <h1>商品目录</h1>
            <hr/>
            <h1>计算机类</h1>
            <hr/>
            <div id="productlist">
                <div id="productlist_img">
                    <img alt="" src="images/productlist.gif" width="100%">
                </div>
                <div id="booklist">
                    <div class="book">
                        <div class="bookimg">
                            <img alt="" src="../static/images/11.jpg " width="130px" height="196px">
                        </div>
                        <div class="bookIntr">
                            <span>书名：JAVA</span><br/>
                            <span style="color: red">售价：66</span>
                        </div>
                    </div>
                    <div class="book">
                        <div class="bookimg">
                            <img alt="" src="../static/images/12.jpg " width="130px" height="196px">
                        </div>
                        <div class="bookIntr">
                            <span>书名：C语言</span><br/>
                            <span style="color: red">售价：34</span>
                        </div>
                    </div>
                    <div class="book">
                        <div class="bookimg">
                            <img alt="" src="../static/images/13.jpg " width="130px" height="196px">
                        </div>
                        <div class="bookIntr">
                            <span>书名：Python</span><br/>
                            <span style="color: red">售价：23</span>
                        </div>
                    </div>
                    <div class="book">
                        <div class="bookimg">
                            <img alt="" src="../static/images/14.jpg " width="130px" height="196px">
                        </div>
                        <div class="bookIntr">
                            <span>书名：C++</span><br/>
                            <span style="color: red">售价：45</span>
                        </div>
                    </div>
                    <div class="book">
                        <div class="bookimg">
                            <img alt="" src="../static/images/15.jpg " width="130px" height="196px">
                        </div>
                        <div class="bookIntr">
                            <span>书名：C#</span><br/>
                            <span style="color: red">售价：23</span>
                        </div>
                    </div>
                    </div>
                    <div class="clear"></div>
                    <div id="jumpPage">
                        <a href="#">上一页</a>
                        <a class="current" href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">6</a>
                        <a href="#">7</a>
                        <a href="#">下一页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="bottom">
        <div id="bottom_left">
            <img alt="" src="images/logo.png">
        </div>
        <div id="bottom_right">

        </div>
    </div>
</div>
</body>
</html>

